<template>
  <div class="tree_item_box">
    <div
      class="column-start-start linkLine_default"
      v-for="(item,s_index) in list"
      :key="s_index"
      :class="{
          'linkLine_first': s_index===0&list.length>1,
          'linkLine_half_top': s_index===0&&list.length===1,
          'linkLine_last': (s_index===(list.length-1)&&s_index!==0),
          'third_layer':!item.children,
          'second_layer':item.children
        }"
    >
      <div
        class="row-flex-start basic_banner"
        :class="{
          // 'active_color': item.expand
          'active_color': item.isActive
        }"
      >
        <div
          v-if="item.children.length"
          class="reTree_icon iconfont"
          @click='expenNode(item)'
          :style="{height: (size||14*1.2) +'px',width: (size||14*1.2) +'px', fontSize: pIconSize}"
          v-html='parentIcon'
        ></div>
        <div
          v-if="!item.children.length"
          class="reTree_icon iconfont"
          @click='expenNode(item)'
          :style="{height: (size||14*1.2) +'px',width: (size||14*1.2) +'px', fontSize: sIconSize}"
          v-html='sonIcon'
        ></div>
        <div
          @click="itemClick(item, list)"
          class="layer_text nowrap"
          :class="{
          // 'active_color': item.expand
          'active_color': item.isActive
        }"
        >{{item[props.label]}}</div>
      </div>
      <line-item
        :list="item.children"
        :props='props'
        v-on="$listeners"
        :size="size"
        :pIconSize='pIconSize'
        :sIconSize='sIconSize'
        :parentIcon='parentIcon'
        :sonIcon='sonIcon'
        v-if="item.expand&&item.children&&item.children.length>0"
        :pd='pd'
        :keyName='keyName'
      ></line-item>
    </div>
  </div>
</template>
<script>
export default {
  name: 'line-item',
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    props: {
      type: Object,
      default: function () {
        return {
          label: 'label',
          children: 'children'
        }
      }
    },
    // 父级icon的大小
    pIconSize: {
      type: String,
      default: '13px'
    },
    // 子级icon的大小
    sIconSize: {
      type: String,
      default: '13px'
    },
    parentIcon: {
      type: String,
      default: '&#xeba5;'
    },
    sonIcon: {
      type: String,
      default: '&#xeba5;'
    },
    size: {
      type: Number,
      default: 14
    },
    keyName: {
      type: String,
      default: 'id'
    },
    pd: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    expenNode (item) {
      let expend = item.expand
      this.$set(item, 'expand', !expend)
    },
    updateActiveId (tree, id) {
      tree.forEach(item => {
        if (item[this.keyName] === id) {
          // item.isActive = true
          this.$set(item, 'isActive', true)
        } else {
          // item.isActive = false
          this.$set(item, 'isActive', false)
        }
        if (item.children && item.children[0]) {
          this.updateActiveId(item.children, id)
        }
      })
    },
    itemClick (item, list) {
      this.updateActiveId(this.pd, item[this.keyName])
      // if (item.expand) {
      //   item.expand = !item.expand
      //   this.$emit('itemClick', item, list)
      //   return
      // }
      // list.forEach(item => {
      //   item.expand = false
      // })
      // item.expand = !item.expand
      this.$emit('itemClick', item, list)
      // if (!item.children) {
      //   this.$emit('valClick', item, list)
      // }
    }
  }
}
</script>
<style lang='stylus'>
.active_color {
  color: #409EFF;
}
.reTree_box {
  overflow-y: auto;
  height calc(100% - 80px)
}
.reTree_icon {
  width: 17px;
  height: 17px;
  margin-right: 10px;
}
.no_icon {
  width: 17px;
  height: 17px;
}
.tree_item_box {
  position: relative;
  width: 100%;
  cursor: pointer;
}
.basic_layer {
  width: 100%;
  position: relative;
  color: #606764;
  cursor: pointer;
  .layer_text {
    flex: 1;
    line-height 16px
    font-size 14px
    word-break break-all
  }
}
.first_vertical_line {
  content: "";
  position: absolute;
  width: 1px;
  left: 6px;
  top: 17px;
  background: #c3c5c8;
}
.basic_banner {
  position: relative;
  width: 100%;
  padding-bottom: 13px;
  display flex
}
.second_layer {
  position: relative;
  width: 100%;
  cursor: pointer;
  padding-left: 25px;
  box-sizing border-box
}
.third_layer {
  position: relative;
  // padding-bottom: 15px;
  width: 100%;
  padding-left: 40px;
  color: #999999;
}

.second_layer::before {
  content: "";
  position: absolute;
  height: 1px;
  width: 16px;
  left: 9px;
  top: 9px;
  background: #c3c5c8;
}
.third_layer::before {
  content: "";
  position: absolute;
  height: 1px;
  width: 22px;
  left: 9px;
  top: 9px;
  background: #c3c5c8;
}

.linkLine_default::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 1px;
  left: 9px;
  top: 0px;
  background: #c3c5c8;
}
.linkLine_first::after {
  content: "";
  position: absolute;
  /* 为了触顶 */
  top: -14px;
  height: calc(100% + 14px);
  width: 1px;
  left: 9px;
  background: #c3c5c8;
}
// 上半截
.linkLine_half_top::after {
  content: "";
  position: absolute;
  height: 24px;
  top: -14px;
  width: 1px;
  left: 9px;
  background: #c3c5c8;
}
.linkLine_last::after {
  content: "";
  position: absolute;
  height: 9px;
  width: 1px;
  left: 9px;
  top: 0px;
  background: #c3c5c8;
}
.reTree_collapse_icon {
  background: url("~assets/img/ic_text_justify@2x.png") no-repeat center center;
  background-size: contain;
}

.reTree_default_icon {
  background: url("~assets/img/ic_text_justify@2x.png") no-repeat center center;
  background-size: contain;
}

.reTree_expand_icon {
  background: url("~assets/img/ic_text_justify@2x.png") no-repeat center center;
  background-size: contain;
}

.reTree_focus_icon {
  background: url("~assets/img/ic_text_justify@2x.png") no-repeat center center;
  background-size: contain;
}
</style>
